<template>

  <div>
    <div class="size">
      <el-avatar class="img1" :src="require('../../assets/Sayori.png')"  @click="isCollapse = !isCollapse"/>
      <span class="name" style="color: #5d797c">{{menuData.name}}</span>
    </div>
    <el-menu
        router
        v-for="item in menuData.menuData"
        @open="handleOpen"
        @close="handleClose"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :default-active="checkNav"
        active-text-color="#77c7d0"
        :cell-style="{'text-align':'center'}"
        mode="vertical"
    >
      <el-menu-item :index="item.router">
        <el-icon class="icon">
          <component  :is="item.icon"></component>
        </el-icon>
        <span class="span" >{{item.name}}</span>
      </el-menu-item>

    </el-menu>

  </div>


</template>

<script>
export default {
  name: "User_Service_Aside",
  props:{
    menuData:{
      type:Array,
      default:function (data){
        return data
      }
    }
  },
  data() {
    return {
      isCollapse:true,
    }
  },
  methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getData(data) {
      this.userName = data.name
      this.menuData1 = data.menuData
    }

  },
  computed : {
    checkNav() {
      const path = this.$route.path.replace('/', '')
      return path || '/'
    }
  }
}
</script>

<style scoped>
.size{
  height: 120px;
}
.icon{
  font-size: 50px;
  font-weight:bold;
}
.span{
  font-size: larger;
  font-weight: bold;
}
.img1{
  height: 45px;
  width: 45px;
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 30px;

}
.name{
  display: inline-block;
  height: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  background-color: #D3DCE6;
  text-align: center;
  width: 160px;
}
.el-menu-vertical-demo{
  background-color: #D3DCE6;

}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);

}

.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
